{% extends 'gideon/layout.html' %}
{% load static %}
{% if data.permission_enable %}
    {% load oracle %}
{% endif %}


{% block css %}
    <link href="{% static 'gideon/css/plugins/icheck/skins/square/green.css' %}" rel="stylesheet">
    <style>
        #search_group .search_group_title {
            min-width: 40px;
            float: left;
            display: inline-block;
            padding: 5px 0 5px 8px;
            margin: 3px;
            font-weight: bold;
        }

        #search_group .search_group_choice {
            padding-left: 60px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        {% if data.search_group %}
            <div class="col-lg-12" id="search_group">
                <div class="panel panel-info">
                    <div class="panel-heading clearfix">
                        <i class="fa fa-info-circle"></i> 快速筛选

                        <button type="button" class="btn btn-success btn-sm float-right" style="margin: -5px auto">
                            <i class="fa fa-chevron-up"></i> 收起显示
                        </button>
                    </div>
                    <div class="panel-body animated">
                        {% for row in data.search_group %}
                            <div class="clearfix">
                                <div class="search_group_title">{{ row.title }}</div>
                                <div class="search_group_choice">
                                    {% for sub in row.sub %}
                                        <a href='{{ sub.href }}'
                                           class='btn btn-outline btn-primary mr-1{% if sub.active %} active{% endif %}'>
                                            {{ sub.title }}
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
        <div class="clearfix mb-2">
            {% if data.action_dict %}
                <form method="post" id="multi_operation_form" class="col-sm-4 float-left">
                    {% csrf_token %}
                    <div class="input-group">
                        <select class="form-control" name="operation">
                            <option value="">----请进行选择----</option>
                            {% for func_name, func_title in data.action_dict.items %}
                                <option value="{{ func_name }}">{{ func_title }}</option>
                            {% endfor %}
                        </select>
                        <span class="input-group-append">
              <button type="button" class="btn btn-info" id="multi_operation_submit">执行</button>
            </span>
                    </div>
                </form>
            {% endif %}
            {% if data.search_list %}
                <form method="get" class="col-sm-4 float-right">
                    <div class="input-group">
                        <input type="text" class="form-control" name="q" placeholder="关键字搜索"
                                {% if data.search_value %} value="{{ data.search_value }}"{% endif %}>
                        <span class="input-group-append">
              <button type="submit" class="btn btn-primary">Go!</button>
            </span>
                    </div>
                </form>
            {% endif %}
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>{% if "table_title" in data and data.table_title %}{{ data.table_title }}{% else %}详情列表{% endif %}</h5>
                        <div class="ibox-tools">
                            {% if data.show_buttons %}
                                {% for item in data.show_buttons %}
                                    <a class="btn btn-primary btn-rounded btn-sm" style="color: white!important;"
                                       href="{{ item.url }}">
                                        <i class="fa {% if item.title == "新建" %}fa-plus{% else %}fa-leaf{% endif %}"></i> {{ item.title }}
                                    </a>
                                {% endfor %}
                            {% endif %}
                            <a class="btn btn-info btn-circle collapse-link" type="button"
                               style="color: white!important;">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            {% if "return_url" in data and data.return_url %}
                                <a class="btn btn-success" type="button" style="color: white!important;"
                                   href="{{ data.return_url }}">
                                    <i class="fa fa-reply"></i> 回到列表
                                </a>
                            {% endif %}
                        </div>
                    </div>
                    <div class="ibox-content">
                        {% block user_show_table %}
                            <table class="table table-bordered table-hover" id="model_table">
                                <thead>
                                <tr>
                                    {% for item in data.header_list %}
                                        <th>
                                            {% if item == "选择" %}
                                                <input type="checkbox" id="checkAll" class="green_check">
                                            {% else %}
                                                {{ item }}
                                            {% endif %}
                                        </th>
                                    {% endfor %}
                                </tr>
                                </thead>
                                <tbody>
                                {% for row in data.body_list %}
                                    <tr>
                                        {% for item in row %}
                                            {% if "key" in item and item.key == "checkbox" %}
                                                <th>
                                                    <input type="checkbox" id="checkbox_{{ item.data }}" name="key"
                                                           value="{{ item.data }}" class="green_check icheckbox">
                                                </th>
                                            {% elif "addition" in item and item.addition.type == "link" %}
                                                <th>
                                                    <a type="button" class="btn btn-outline btn-default" href="{{ item.data.href }}"{% if item.addition.target %} target="{{ item.addition.target }}"{% endif %}>
                                                        <i class="fa {% if item.data.icon %}{{ item.addition.icon }}{% else %}fa-leaf{% endif %}"></i> {{ item.data.title }}
                                                    </a>
                                                </th>
                                            {% elif item.type == "body" %}
                                                <th>{{ item.data }}</th>
                                            {% elif item.type == "operation" %}
                                                <th>
                                                    {% for i in item.data %}
                                                        <a type="button"
                                                           class="btn btn-outline {% if i.title == "编辑" %}btn-info{% elif i.title == "删除" %}btn-danger{% else %}btn-primary{% endif %}"
                                                           href="{{ i.url }}">
                                                            <i class="fa {% if i.title == "编辑" %}fa-edit{% elif i.title == "删除" %}fa-trash{% else %}fa-pagelines{% endif %}"></i> {{ i.title }}
                                                        </a>
                                                    {% endfor %}
                                                </th>
                                            {% endif %}
                                        {% endfor %}
                                    </tr>
                                {% endfor %}
                                </tbody>
                                {% if data.page_list %}
                                    <tfoot>
                                    <tr>
                                        <td colspan="{{ data.header_list|length }}" class="footable-visible">
                                            <ul class="pagination float-right">
                                                {% for page in data.page_list %}
                                                    <li class="footable-page{% if page.active %} active{% endif %}">
                                                        <a data-page="{{ page.key }}" href="{{ page.url }}">
                                                            {{ page.title }}
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </td>
                                    </tr>
                                    </tfoot>
                                {% endif %}
                            </table>
                        {% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <!-- iCheck -->
    <script src="{% static 'gideon/js/plugins/icheck/icheck.min.js' %}"></script>
    <script>
        // icheck 样式
        $('.green_check').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        // 全选功能
        // 全选功能会互相影响，设置lock变量
        let icheck_lock = "unlock"
        // 全选的checkbox按钮
        let checkAll = $("#checkAll")
        // 单独的checkbox按钮
        let checkboxs = $(".icheckbox")
        // 全选反选功能
        checkAll.on('ifChecked ifUnchecked', function (event) {
            if (icheck_lock === "unlock") {
                icheck_lock = "checkall"
                if (event.type === 'ifChecked') {
                    checkboxs.iCheck('check');
                } else {
                    checkboxs.iCheck('uncheck');
                }
                icheck_lock = "unlock"
            }
        });

        //判断是否全选使全选按钮为点击状态
        checkboxs.on('ifChanged', function (event) {
            if (icheck_lock === "unlock") {
                icheck_lock = "check_change"
                if (checkboxs.filter(':checked').length === checkboxs.length) {
                    checkAll.iCheck('check');
                } else {
                    checkAll.iCheck('uncheck');
                }
                checkAll.iCheck('update');
                icheck_lock = "unlock"
            }
        })


        $('#multi_operation_submit').click(function () {
            $('#multi_operation_form').append($("#model_table").clone().addClass('d-none')).submit();
        });
        {% if data.search_group %}
            $("#search_group .panel-heading button").click(function () {
                let panelBody = $("#search_group .panel-body")
                if (panelBody.hasClass("d-none")) {
                    $(this).html("<i class=\"fa fa-chevron-up\"></i> 收起选项")
                    panelBody.removeClass("d-none");
                } else {
                    $(this).html("<i class=\"fa fa-chevron-down\"></i> 展开选项")
                    panelBody.addClass("d-none");
                }
                // if (panelBody.hasClass("fadeOutUp")) {
                //     panelBody.addClass("fadeOutIn").removeClass("fadeOutUp");
                // } else {
                //     panelBody.addClass("fadeOutUp").removeClass("fadeOutIn");
                // }
            })
        {% endif %}
    </script>
{% endblock %}